<template >
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>

        <el-button style="float:right; margin-right: 30px" type="primary" @click="getDronesList()">查询</el-button>
        <el-button style="float:right; margin-right: 15px" @click="handleResetSearch()">重置</el-button>
      </div>
      <div style="margin-top: 30px; ">
        <el-form style="display: inline-block;">
          <div style="display: inline-block;margin-left:20px">
            <el-form-item label="飞行日期：">
              <el-input class="input-width" placeholder="飞行日期" v-model="queryParams.param.detectionDate" clearable></el-input>
            </el-form-item>
          </div>
          <div style="display: inline-block;margin-left:20px">
            <el-form-item label="设备编号：">
              <el-input class="input-width" placeholder="设备编号" v-model="queryParams.param.equipmentNumber" clearable></el-input>
            </el-form-item>
          </div>
          <div style="display: inline-block;margin-left:20px">
            <el-form-item label="飞行次序：">
              <el-input class="input-width" placeholder="飞行次序" v-model="queryParams.param.times" clearable></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-table ref="multipleTableRef" :data="dronesList" style="width:100%" :broder="true" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="equipmentName" label="设备名称" />
      <el-table-column prop="equipmentNumber" label="设备编号" />
      <el-table-column prop="detectionDate" label="飞行日期" />
      <el-table-column prop="temp" label="温度" />
      <el-table-column prop="pm10" label="PM1.0" />
      <el-table-column prop="pm25" label="PM2.0" />
      <el-table-column prop="pm100" label="PM10" />
      <el-table-column prop="humidity" label="湿度" />
      <el-table-column prop="o3" label="臭氧" />
      <el-table-column prop="height" label="高度" />
      <el-table-column prop="city" label="城市" />
      <el-table-column prop="times" label="飞行次" />
      <el-table-column label="飞行方向" width="200">
        <template v-slot="scope">
          <span>{{ scope.row.direction === 1 ? '上升阶段' : '下降阶段' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)" type="primary">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!-- 编辑框 -->
    <el-dialog v-model="dialogFormVisible" :before-close="beforeClose" title="修改信息" width="800">
      <el-form ref="formRef" :model="updateForm" :rules="rules">
        <el-form-item prop="city" label="城市：">
          <el-input v-model="updateForm.city" />
        </el-form-item>
        <el-form-item prop="equipmentName" label="设备名称：">
          <el-input v-model="updateForm.equipmentName" />
        </el-form-item>
        <el-form-item prop="equipmentNumber" label="设备编号">
          <el-input v-model="updateForm.equipmentNumber" />
        </el-form-item>
        <el-form-item prop="detectionDate" label="飞行日期：">
          <el-input v-model="updateForm.detectionDate" />
        </el-form-item>
        <el-form-item prop="height" label="高度：">
          <el-input v-model="updateForm.height" />
        </el-form-item>
        <el-form-item prop="direction" label="方向：">
          <el-select placeholder="请选择" v-model="updateForm.direction" clearable>
            <el-option :label="'上升阶段'" :value="1"></el-option>
            <el-option :label="'下降阶段'" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="startTime" label="开始时间：">
          <el-input v-model="updateForm.startTime" />
        </el-form-item>
        <el-form-item prop="endTime" label="结束时间：">
          <el-input v-model="updateForm.endTime" />
        </el-form-item>
        <el-form-item prop="temp" label="温度：">
          <el-input v-model="updateForm.temp" />
        </el-form-item>
        <el-form-item prop="pm10" label="PM1.0">
          <el-input v-model="updateForm.pm10" />
        </el-form-item>
        <el-form-item prop="pm25" label="PM2.0">
          <el-input v-model="updateForm.pm25" />
        </el-form-item>
        <el-form-item prop="pm100" label="PM10">
          <el-input v-model="updateForm.pm100" />
        </el-form-item>
        <el-form-item prop="humnidity" label="湿度">
          <el-input v-model="updateForm.humidity" />
        </el-form-item>
        <el-form-item prop="o3" label="臭氧：">
          <el-input v-model="updateForm.o3" />
        </el-form-item>
        <el-form-item prop="times" label="飞行次：">
          <el-input v-model="updateForm.times" />
        </el-form-item>
      </el-form>
      <el-button type="primary" style="margin-left: 50%;" @click="confirm()">提交</el-button>
    </el-dialog>

    <!-- 分页 -->
    <div>
      <el-pagination :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :page-sizes="[15, 30, 45]"
        :small="false" :disabled="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleNumChange" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { fetchDrone2sByPage, updateDrone, uploadDrones, deleteDrone } from "../../api/drone2Api";
import { nextTick, ref, reactive, onMounted, VueElement } from "vue";
import { ElMessage, ElMessageBox, } from "element-plus";
import * as XLSX from "xlsx";

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  param: {
    equipmentNumber: "",
    detectionDate: "",
    times: ""
  }
});

//获得列表
const dronesList = ref([]); // 直接使用 ref 定义数组
let total = ref(0);

function getDronesList() {
  console.log("query",queryParams);
  console.log("00000000");
  fetchDrone2sByPage(queryParams)
    .then(res => {

      console.log(res.data.result.records);
      console.log("res.data.result.records", res.data.result);
      // 确保从 res 中提取数组
      dronesList.value = res.data.result.records; // 如果 res 是数组
      // 或者根据实际情况调整，如：towersList.value = res.data;
      total.value = res.data.result.total;
      // console.log("tower", towersList.value);
      console.log('queryParams.value', queryParams.param)
      //queryParams.param.PointName = 

    })
    .catch(error => {
      console.error("Error fetching drones list:", error);
    });
}
//更改每页显示数量
const handleSizeChange = val => {
  queryParams.pageSize = val;
  getDronesList();
};

//更换页数
const handleNumChange = val => {
  queryParams.pageNum = val;
  getDronesList();
};

//编辑功能
const dialogFormVisible = ref(false);
const formRef = ref();

const updateForm = ref({
  city: "",
  detectionDate: "",
  direction: "",
  endTime: "",
  equipmentName: "",
  equipmentNumber: "",
  height: "",
  humidity: "",
  id: "",
  o3: "",
  pm10: "",
  pm25: "",
  pm100: "",
  startTime: "",
  temp: "",
  times: "",

});

const handleEdit = (rowData = {}) => {
  dialogFormVisible.value = true;
  console.log("rowData", rowData);
  //弹窗打开form 声称是异步的
  nextTick(() => {
    //如果是编辑
    if (rowData) {
      Object.assign(updateForm.value, rowData);
      // updateForm.value = rowData
      console.log("这里是获取编辑数据", rowData);
    }
  });
};

const confirm = async () => {
  console.log("更新内容", updateForm);
  console.log("更新内容", updateForm.value);
  updateDrone(updateForm.value)
    .then(response => {
      console.log('上传成功', response);
      dialogFormVisible.value = false; // 关闭弹窗
      ElMessage({
          message: "修改成功",
          type: "success",
          duration: 1000
        });
      // 可以根据需要进一步处理响应
      getDronesList();
    })
    .catch(error => {
      console.error('修改失败', error);
      ElMessage({
        message: "修改失败",
        type: "error",
        duration: 1000
      });
      // 你可以通过 error.response 获取详细的失败信息（比如 status 或 message）
      if (error.response) {
        // 请求已发出，服务器响应了状态码，且响应体
        console.error('服务器返回错误:', error.response.data);
      } else if (error.request) {
        // 请求已发出，但没有收到响应
        console.error('没有收到响应:', error.request);
      } else {
        // 发生了一些其他错误
        console.error('请求错误:', error.message);
      }
    });
};

//删除
const deleteItem = async (id) => {
  try {
    await ElMessageBox.confirm('是否要删除该条数据', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    console.log(id);
    await deleteDrone(id);
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1000
    });
  } catch (error) {
    // Handle cancel or error
  }
  getDronesList();
};


//重置事件
const handleResetSearch = async () => {
  console.log(3189),
  queryParams.param.equipmentNumber = '',
  queryParams.param.detectionDate='',
  queryParams.param.times='',
  getDronesList()

}

onMounted(() => {
  getDronesList();
});

</script>
   <style lang="less">
</style>